var MaterialForm = function () {
  var template = /*html*/ `
    <div class="material-form" v-loading.fullscreen.lock="loading">
      <template v-if="material!==null">
        <el-form :model="material" label-width="115px">
          <el-form-item label="物料名称">
            <span v-if="isRead">{{material.materialName}}</span>
            <el-autocomplete v-else class="form-input" v-model="material.materialName" :fetch-suggestions="function(){getSuggestionData('materialList',arguments)}"
              @change="searchMaterial"></el-autocomplete>
          </el-form-item>
          <el-form-item label="规格型号">
            <span v-if="isRead">{{material.model}}</span>
            <el-autocomplete v-else class="form-input" v-model="material.model" :fetch-suggestions="function(){getSuggestionData('modelList',arguments)}"
              @change="searchMaterial"></el-autocomplete>
          </el-form-item>
          <el-form-item label="编号">
            <span v-if="isRead">{{material.color}}</span>
            <el-autocomplete v-else class="form-input" v-model="material.color" :fetch-suggestions="function(){getSuggestionData('colorList',arguments)}"
              @change="searchMaterial"></el-autocomplete>
          </el-form-item>
          <el-form-item label="供应商名称">
            <span v-if="isRead">{{material.providerName}}</span>
            <el-select v-else filterable class="form-input" v-model="material.providerName" @change="searchMaterial">
              <el-option v-for="(customerName,index) in dropdownOption.customerNameList" :key="'customerName_'+index" :value="customerName" :label="customerName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input class="form-input" v-model="material.colorDescription"></el-input>
          </el-form-item>
          <el-form-item label="物料部门">
            <el-select clearable filterable class="form-input" v-model="material.materialDept" value-key="materialDeptId" @change="deptChange">
              <el-option v-for="dept in deptList" :key="dept.materialDeptId" :value="dept" :label="dept.materialDeptName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供方编号">
            <el-input class="form-input" v-model="material.providerNo"></el-input>
          </el-form-item>
          <el-form-item label="默认仓库">
            <span>{{material.defaultWarehouse}}</span>
          </el-form-item>
          <el-form-item label="订单物料类型">
            <span>{{billMaterial.materialType}}</span>
          </el-form-item>
          <el-form-item label="物料类型">
            <template v-if="mode==='add'">
            <el-select filterable class="form-input" v-model="material.materialType">
              <el-option v-for="(materialType,index) in getMaterialTypeList()" :key="'materialType_'+index" :value="materialType">
              </el-option>
            </el-select>
            </template>
            <span v-else>{{material.materialType}}</span>
          </el-form-item>
          <el-form-item label="材质">
            <span v-if="isRead||!canUpdate">{{material.material}}</span>
            <el-input v-else class="form-input" v-model="material.material"></el-input>
          </el-form-item>
          <el-form-item v-if="material.materialType==='镜片'" label="透光率(%)">
            <span v-if="isRead||!canUpdate">{{material.transmittance}}</span>
            <el-input-number v-else class="form-input" v-model="material.transmittance" controls-position="right" :min="0" :max="100" :precision="0">
            </el-input-number>
          </el-form-item>
          <el-form-item label="单位">
          <span v-if="isRead||!canUpdate">{{material.unit}}</span>
            <el-select v-else filterable class="form-input" v-model="material.unit" @change="unitChange">
              <el-option v-for="(unit,index) in dropdownOption.unitList" :key="'unit_'+index" :value="unit" :label="unit">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价">
            <span v-if="isRead||!canUpdate">{{material.unitPrice}}</span>
            <el-input-number v-else class="form-input" v-model="material.unitPrice" controls-position="right" :min="0" :precision="2">
            </el-input-number>
          </el-form-item>
          <el-form-item label="计价单位是否和生产单位相同" class="equal-form-input">
            <span>{{equalList[material.isEquals]}}</span>
          </el-form-item>
          <el-form-item label="采购周期">
            <span v-if="isRead||!canUpdate">{{material.procurementCycles}}</span>
            <el-input-number v-else class="form-input" v-model="material.procurementCycles" controls-position="right" :min="0" :precision="0">
            </el-input-number>
          </el-form-item>
          <el-form-item label="投料数">
            <span v-if="isRead">{{material.feedTotal}}</span>
            <el-input-number v-else class="form-input" v-model="material.feedTotal" controls-position="right" :min="1" :precision="0">
            </el-input-number>
          </el-form-item>
          <el-form-item label="用料条数">
            <span v-if="isRead">{{material.yltsTotal}}</span>
            <el-input-number v-else class="form-input" v-model="material.yltsTotal" controls-position="right" :min="0.0001" :precision="4">
            </el-input-number>
          </el-form-item>
          <el-form-item label="订单数">
            <span v-if="isRead">{{material.orderTotal}}</span>
            <el-input-number v-else class="form-input" v-model="material.orderTotal" controls-position="right" :min="0" :precision="0">
            </el-input-number>
          </el-form-item>
        </el-form>
        <div style="text-align:center" v-if="mode!=='approval'">
          <el-button type="primary" @click="saveBillMaterial">
            <span v-if="mode==='add'">新增</span>
            <span v-else-if="mode==='update'">修改申请</span>
          </el-button>
        </div>
      </template>
    </div>
  `;

  return {
    props: {
      mode: {
        type: String,
        default: 'add'
      },
      billMaterial: {
        type: Object,
        defualt: null
      },
      order: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        default: null
      }
    },

    watch: {
      resetLoading: function (val) {
        if (!val && this.saving) {
          this.saveBillMaterial();
        }
      }
    },

    data: function () {
      return {
        loading: false,
        resetLoading: false,
        saving: false,
        material: null,
        canUpdate: true,
        isRead: this.mode === 'approval',
        equalList: ['不相同', '相同'],
        deptList: [],
        materialList: []
      };
    },

    created: function () {
      var billMaterial = this.billMaterial,
        order = this.order;
      var promiseList = [this.setDeptList()];

      var flag = true;
      if (billMaterial === null) {
        var material = new BillMaterialFormModel(order, null);
        this.material = material;
        this.canUpdate = true;
        flag = false;
      } else {
        var materialCode = billMaterial.materialCode;
        if (SysUtil.isEmpty(materialCode)) {
          var material = new BillMaterialFormModel(order, billMaterial);
          this.material = material;
          this.canUpdate = true;
          flag = false;
        }
      }

      if (flag) {
        promiseList.push(
          this.resetMaterialData({
            materialCode: materialCode
          })
        );
      }

      this.loading = true;
      var self = this;
      Promise.all(promiseList).then(function () {
        self.loading = false;
      });
    },

    methods: {
      setDeptList: function () {
        var deptList = this.dropdownOption.deptList;
        if (deptList !== undefined) {
          this.deptList = deptList;
          return Promise.resolve(deptList);
        }

        var self = this;
        return ajaxRequest('basicData/getDeptName', {
          view: 1
        }).then(function (deptList) {
          deptList = _.map(deptList, function (dept) {
            return {
              materialDeptId: dept.id,
              materialDeptName: dept.deptName
            };
          });
          self.deptList = deptList;
          self.dropdownOption.deptList = deptList;
          return deptList;
        });
      },

      searchMaterial: function () {
        var material = this.material;
        if (!material.isChange()) {
          return;
        }

        material.saveOldData();
        var postData = material.getSearchObject();
        if (postData !== null) {
          this.resetMaterialData(postData);
        } else {
          this.canUpdate = true;
        }
      },

      deptChange: function () {
        var data = this.getBillMaterialDetail();
        var material = this.material;
        if (SysUtil.isEmpty(data)) {
          material.materialCode = '';
          this.canUpdate = true;
        } else {
          material.resetObject(data);
          this.canUpdate = false;
        }
      },

      resetMaterialData: function (postData) {
        var self = this;
        this.resetLoading = true;
        return ajaxRequest('basicData/getCompanyMaterialListByDetail', postData).then(function (materialList) {
          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            var materialDeptId = material.materialDeptId;
            var materialDeptName = material.materialDeptName;
            if (!SysUtil.isEmpty(materialDeptId) && !SysUtil.isEmpty(materialDeptName)) {
              material.materialDept = {
                materialDeptId: materialDeptId,
                materialDeptName: materialDeptName
              };
            } else {
              material.materialDept = '';
              material.materialDeptId = '';
            }
          }

          var data = self.getBillMaterialDetail(materialList);
          var material = self.material,
            billMaterial = self.billMaterial,
            order = self.order;

          if (SysUtil.isEmpty(data)) {
            if (material === null) {
              material = new BillMaterialFormModel(order, billMaterial);
              self.material = material;
            } else {
              material.materialCode = '';
            }
            self.canUpdate = true;
          } else {
            if (material === null) {
              material = new BillMaterialFormModel(order, billMaterial);
              material.resetObject(data);
              self.material = material;
            } else {
              material.resetObject(data);
            }
            self.canUpdate = false;
          }
          self.materialList = materialList;
          self.resetLoading = false;
          return material;
        }).catch(function () {
          self.resetLoading = false;
          return null;
        });
      },

      getBillMaterialDetail: function (materialList) {
        if (materialList === undefined) {
          materialList = this.materialList;
        }

        if (materialList.length === 0) {
          return null;
        }

        var material = this.material;
        if (SysUtil.isEmpty(material)) {
          return _.cloneDeep(materialList[0]);
        }

        var materialDeptId = material.materialDept === '' ? '' : material.materialDept.materialDeptId;

        var billMaterial = _.find(materialList, {
          materialDeptId: materialDeptId
        });
        if (billMaterial === undefined) {
          return null;
        }
        return _.cloneDeep(billMaterial);
      },

      resetForm: function (material) {
        this.material.resetObject(material);
        this.searchMaterial();
      },

      getSuggestionData: function (field, arr) {
        var queryString = arr[0];
        var cb = arr[1];
        var suggestList = this.dropdownOption[field];
        if (queryString !== '') {
          suggestList = _.filter(suggestList, function (suggest) {
            return suggest.indexOf(queryString) !== -1;
          });
        }
        suggestList = _.map(suggestList, function (suggest) {
          return {
            value: suggest
          };
        });
        cb(suggestList);
      },

      saveBillMaterial: function () {
        if (this.resetLoading) {
          this.saving = true;
          return;
        }
        this.saving = false;
        var material = this.material;
        var mode = this.mode;
        this.$emit('save-bill-order', material, this.canUpdate, mode);
      },

      unitChange: function () {
        var unit = this.material.unit;
        var isEquals;
        if (unit === '付') {
          isEquals = 1;
        } else {
          isEquals = 0;
        }
        this.material.isEquals = isEquals;
      },

      getMaterialTypeList: function () {
        var materialTypeList = this.dropdownOption.materialTypeList;
        var defaultWarehouse = this.material.defaultWarehouse;
        var materialTypes = materialTypeList[defaultWarehouse];
        if (materialTypes === undefined) {
          materialTypes = [];
        }
        return materialTypes;
      }
    },

    template: template
  };
}();
